<template>
  <a-modal
    :visible="visible"
    @cancel="onCancel"
    @close="onClose"
    :title="modalConfig.title"
    :mask-closable="false"
    class="modal-dialog-wrapper"
    :unmount-on-close="hidedModal == false"
    width="85vw"
  >
    <div class="vehicle-accounting-fee-modal_cont">
      <component :is="modalConfig.component" />
    </div>
    <template #footer>
      <a-button @click="onCancel"> 关闭 </a-button>
    </template>
  </a-modal>
</template>

<script setup>
  // 弹框组件
  import { ref, defineAsyncComponent, provide, reactive, watch } from 'vue'
  // 异步组件
  const AssetFee = defineAsyncComponent(() => import('./widget/asset-fee.vue'))
  const PurchaseTax = defineAsyncComponent(() => import('./widget/purchase-tax.vue'))
  const PurchaseOtherFee = defineAsyncComponent(() => import('./widget/purchase-other-fee.vue'))
  const RentTotal = defineAsyncComponent(() => import('./widget/rent-total.vue'))
  const ViolationFee = defineAsyncComponent(() => import('./widget/violation-fee.vue'))
  const ExpenseFee = defineAsyncComponent(() => import('./widget/expense-fee.vue'))
  import { useRoute } from 'vue-router'

  const route = useRoute()

  const emits = defineEmits(['close', 'cancel'])
  const modalConfig = ref({})
  const visible = ref(false)
  const modalStatus = reactive({
    loading: true,
    queryParams: {},
  })
  provide('modalStatus', modalStatus)

  const Modal_Config_Map = {
    purchaseTax: {
      title: '购置税支出',
      component: PurchaseTax,
    },
    purchaseOtherFee: {
      title: '购置其他支出',
      component: PurchaseOtherFee,
    },
    assetFee: {
      title: '保养费支出',
      component: AssetFee,
    },
    repairFee: {
      title: '维修费支出',
      component: AssetFee,
    },
    inspectionFee: {
      title: '年检费支出',
      component: AssetFee,
    },
    vehicleBorrowFee: {
      title: '车辆借出收入',
      component: AssetFee,
    },
    // 不支持长租跳转
    rentAmount: {
      title: '租金收入',
      component: RentTotal,
    },
    // 不支持长租跳转
    otherFeeAmount: {
      title: '其他费用收入',
      component: RentTotal,
    },
    // 不支持长租跳转
    violationFeeAmount: {
      title: '违章代办收入',
      component: ViolationFee,
    },
    expenseFeeAmount: {
      title: '报销单支出',
      component: ExpenseFee,
    },
    paymentFeeAmount: {
      title: '付款单支出',
      component: ExpenseFee,
    },
  }

  const open = (data, code) => {
    console.log('open data', data)

    modalStatus.queryParams = { ...data, isFilter: data?.isFilter ?? true }
    modalConfig.value = Modal_Config_Map[code]
    visible.value = true
  }
  const onClose = () => {
    visible.value = false
    modalStatus.loading = true
    modalStatus.queryParams = {}
    emits('close')
  }

  const onCancel = () => {
    visible.value = false
    emits('cancel')
  }

  const hidedModal = ref(false)
  const hiedModal = () => {
    hidedModal.value = true
    visible.value = false
    const hideW = watch(
      () => route.name,
      (val) => {
        if (val == 'VehicleAccounting') {
          hidedModal.value = false
          visible.value = true
          hideW()
        }
      }
    )
  }

  provide('closeModal', hiedModal)

  defineExpose({
    open,
  })
</script>

<style lang="less" scoped>
  .vehicle-accounting-fee-modal_cont {
    position: relative;
    max-height: 78vh;
  }
</style>
